<script setup>
import { ref } from 'vue';
let active = ref(0);
</script>

<template>
  <router-view></router-view>
  <van-tabbar v-model="active">
    <van-tabbar-item @click="$router.push('/')">
      <div class="tab-item-container">
        <div class="tab-image" :style="active === 0 ? { backgroundImage: `url(/src/assets/tabASelected.png)` } : { backgroundImage: `url(/src/assets/tabADeselected.png)` }"></div>
        <div class="tab-text">首页</div>
      </div>
    </van-tabbar-item>
    <van-tabbar-item @click="$router.push('/demo2')">
      <div class="tab-item-container">
        <div class="tab-image" :style="active === 1 ? { backgroundImage: `url(/src/assets/tabBSelected.png)` } : { backgroundImage: `url(/src/assets/tabBDeselected.png)` }"></div>
        <div class="tab-text">减脂</div>
      </div>
    </van-tabbar-item>
    <van-tabbar-item @click="$router.push('/demo3')">
      <div class="tab-item-container">
        <div class="tab-image" :style="active === 2 ? { backgroundImage: `url(/src/assets/tabCSelected.png)` } : { backgroundImage: `url(/src/assets/tabCDeselected.png)` }"></div>
        <div class="tab-text">收藏</div>
      </div>
    </van-tabbar-item>
    <van-tabbar-item @click="$router.push('/demo4')">
      <div class="tab-item-container">
        <div class="tab-image" :style="active === 3 ? { backgroundImage: `url(/src/assets/tabDSelected.png)` } : { backgroundImage: `url(/src/assets/tabDDeselected.png)` }"></div>
        <div class="tab-text">我的</div>
      </div>
    </van-tabbar-item>
  </van-tabbar>
</template>

<style scoped>
.tab-item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 确保容器内部元素垂直居中 */
  height: 100%; /* 确保容器高度，以便子元素可以垂直居中 */
}

.tab-image {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain; /* 确保图片完全显示在容器内 */
  background-position: center; /* 确保图片在容器内居中 */
}

.tab-text {
  margin-top: 5px; /* 根据需要调整文字与图标的间距 */
  text-align: center; /* 确保文字水平居中 */
}

</style>